<template>
  <div class="signsBox">
    <div class="container">
      <div class="topTitleTab">
        <span>当前位置：首页 > 交通标志</span>
      </div>
      <div class="contendBox">
        <div class="signs_left">
          <ul>
            <li
              v-for="(item, i) in optionList"
              :key="i"
              :class="currentItem.id == item.id ? 'active curp' : 'curp'"
              @click="change(item)"
            >
              {{ item.title }}
            </li>
          </ul>
        </div>
        <div class="signs_right">
          <div class="title">
            <span>{{ currentItem.title }}</span>
          </div>
          <div class="signsBox">
            <div
              class="signItem"
              v-for="(item, i) in rightList"
              :key="i"
              @click="show(item, i)"
            >
              <div class="imgBox">
                <img :src="item.picture" alt="" />
              </div>
              <p class="signItemtitle">{{ item.title }}</p>
              <!-- <div class="textBox">
                  <span>{{item.title}}</span>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogTableVisible"
      :width="`600px`"
      :destroy-on-close="true"
      v-if="dialogTableVisible"
    >
      <section v-swiper:mySwiper="swiperOption" class="swiper-container banner">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide signSlide"
            v-for="(item, idx) in rightList"
            :key="idx"
          >
            <div class="slideImgBox">
              <img :src="item.picture" />
            </div>
            <p class="slidetitle titleColor">{{ item.title }}</p>
            <p class="slidecontent">{{ item.content }}</p>
          </div>
        </div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </section>
    </el-dialog>
  </div>
</template>
<script>
import { trafficsignOption, trafficsign } from "~/api/signs.js";
export default {
  components: {},
  data() {
    return {
      rightCurrent: null,
      dialogTableVisible: false,
      rightIndex: 0,
      swiperOption: {
        slidesPerView: "auto",
        centeredSlides: true,
        spaceBetween: 30,
        initialSlide: this.rightIndex,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        on: {
          slideChange() {},
          tap() {},
        },
      },
    };
  },
  watchQuery: ['cuIdx'],
  async asyncData({ app, query, params }) {
    let optionList = await trafficsignOption();
  
    let currentItem
    let cuIdx
    if(query.cuIdx){
      currentItem= optionList[query.cuIdx]
      cuIdx=optionList[query.cuIdx].id
    }else{
      currentItem= optionList[0]
      cuIdx=optionList[0].id
    }
      let rightList = await trafficsign({ option: cuIdx });
    return {
      optionList: optionList,
      rightList: rightList,
      currentItem: currentItem,
    };
  },

  methods: {
    change(val) {
      this.currentItem = val;
      this.getrightList(val.id);
    },
    show(val, i) {
      this.rightCurrent = val;
      this.rightIndex = i;
      this.$nextTick(() => {
        this.swiperOption.initialSlide = i;
        this.dialogTableVisible = true;
      });
    },
    async getrightList(id) {
      let rightList = await trafficsign({ option: id });
      this.rightList = rightList;
    },
  },
};
</script>

<style scoped lang='scss'>
@import "~/assets/css/signs.scss";
.signSlide {
  .slideImgBox {
    width: 400px;
    height: 300px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    img {
      flex-shrink: 0;
      object-fit: contain;
    }
  }
  p {
    font-size: 16px;
    line-height: 28px;
  }
  .slidetitle {
    text-align: center;
    font-weight: 700;
    padding: 10px;
    border-bottom: 1px solid #e9e9e9;
  }
  .slidecontent {
    padding: 0 20px;
  }
}
</style>